<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery.rotate旋转插件</title>



<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript" src="js/jquery.rotate.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){



$('#img1').rotate({angle:45});



$("#img2").rotate({ 

   bind: 

     { 

        mouseover : function() { 

            $(this).rotate({animateTo:180});

        },

        mouseout : function() { 

            $(this).rotate({animateTo:0});

        }

     } 

   

});





var angle = 0;

setInterval(function(){

      angle+=3;

     $("#img3").rotate(angle);

},50);





var rotation = function (){

   $("#img4").rotate({

      angle:0, 

      animateTo:360, 

      callback: rotation

   });

}

rotation();







var rotation2 = function (){

   $("#img5").rotate({

      angle:0, 

      animateTo:360, 

      callback: rotation2,

      easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration

          return c*(t/d)+b;

      }

   });

}

rotation2();





$("#img6").rotate({ 

   bind: 

     { 

        click: function(){

            $(this).rotate({ angle:0,animateTo:2400,easing: $.easing.easeOutExpo,duration:5000 })

        }

     } 

   

});





var value2 = 0

$("#img7").rotate({ 

   bind: 

     { 

        click: function(){

            value2 +=90;

            $(this).rotate({ animateTo:value2})

        }

     } 

   

});



});

</script>





</head>



<body>

<!-- <img id="img1" src="images/chrome.png" width="256" height="256"/> -->

<img id="img2" src="images/chrome.png" width="256" height="256" />

<img id="img3" src="images/chrome.png" width="256" height="256"/>

<!-- <img id="img4" src="images/chrome.png" width="256" height="256"/> -->

<img id="img5" src="images/chrome.png" width="256" height="256"/> -->

<img id="img6" src="images/chrome.png" width="256" height="256"/>

<img id="img7" src="images/chrome.png" width="256" height="256"/>

</body>







</html>



